<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<CustomNavbar :title="categoryData.name + '详情'" />

		<!-- 分类概览卡片 -->
		<view class="category-overview">
			<view class="category-header">
				<view class="category-icon">
					<text class="icon-text">{{getCategoryIcon()}}</text>
				</view>
				<view class="category-info">
					<text class="category-name">{{categoryData.name}}</text>
					<text class="category-type">{{categoryData.type === 'EXPENSE' ? '支出分类' : '收入分类'}}</text>
				</view>
			</view>
			
			<view class="category-stats">
				<view class="stat-item">
					<text class="stat-label">本月金额</text>
					<text :class="['stat-value', categoryData.type === 'EXPENSE' ? 'expense' : 'income']">
						{{categoryData.type === 'EXPENSE' ? '-' : '+'}}¥{{categoryData.amount}}
					</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">占比</text>
					<text class="stat-value">{{categoryData.percentage}}%</text>
				</view>
			</view>
		</view>

		<!-- 本月记录列表 -->
		<view class="records-section">
			<view class="section-header">
				<text class="section-title">本月记录</text>
				<text class="record-count">{{records.length}}笔</text>
			</view>
			
			<view v-if="loading" class="loading-state">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在加载记录...</text>
			</view>
			
			<view v-else-if="records.length > 0" class="record-list">
				<view v-for="record in records" :key="record.id" class="record-item">
					<view class="record-date">
						<text class="date-text">{{formatDate(record.date)}}</text>
					</view>
					<view class="record-info">
						<text class="record-note">{{record.note || '无备注'}}</text>
						<text class="record-time">{{formatTime(record.date)}}</text>
					</view>
					<view class="record-amount">
						<text :class="['amount-text', categoryData.type === 'EXPENSE' ? 'expense' : 'income']">
							{{categoryData.type === 'EXPENSE' ? '-' : '+'}}¥{{record.amount}}
						</text>
					</view>
				</view>
			</view>
			
			<view v-else class="empty-records">
				<view class="empty-icon">📝</view>
				<text class="empty-text">本月暂无{{categoryData.name}}记录</text>
				<text class="empty-desc">开始记账后这里会显示相关记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import { recordAPI } from '@/utils/api.js'
	
	export default {
		components: {
			CustomNavbar
		},
		data() {
			return {
				categoryData: {
					name: '',
					type: 'EXPENSE',
					amount: '0.00',
					percentage: '0.0',
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1
				},
				records: [],
				loading: false
			}
		},
		onLoad(options) {
			if (options.data) {
				try {
					this.categoryData = JSON.parse(decodeURIComponent(options.data))
					console.log('分类详情数据:', this.categoryData)
					this.loadCategoryRecords()
				} catch (error) {
					console.error('解析分类数据失败:', error)
					uni.showToast({
						title: '数据解析失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async loadCategoryRecords() {
				this.loading = true
				try {
					const startDate = `${this.categoryData.year}-${String(this.categoryData.month).padStart(2, '0')}-01`
					const endDate = `${this.categoryData.year}-${String(this.categoryData.month).padStart(2, '0')}-${new Date(this.categoryData.year, this.categoryData.month, 0).getDate()}`
					
					// 获取该分类的所有记录
					const allRecords = await recordAPI.getByDateRange(startDate, endDate)
					
					// 筛选出当前分类的记录
					this.records = allRecords
						.filter(record => {
							const recordType = (record.recordType || record.type || 'expense').toUpperCase()
							const categoryName = record.category?.name || record.categoryName || ''
							return recordType === this.categoryData.type && categoryName === this.categoryData.name
						})
						.map(record => ({
							id: record.id,
							amount: record.amount || 0,
							note: record.note || record.description || '',
							date: record.recordDate || record.date || record.createdAt
						}))
						.sort((a, b) => new Date(b.date) - new Date(a.date))
					
					console.log('分类记录:', this.records)
				} catch (error) {
					console.error('加载分类记录失败:', error)
					uni.showToast({
						title: '加载记录失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			getCategoryIcon() {
				// 根据分类名称返回对应图标
				const iconMap = {
					// 支出分类
					'餐饮': '🍽️',
					'交通': '🚗',
					'购物': '🛒',
					'娱乐': '🎮',
					'医疗': '🏥',
					'教育': '📚',
					'住房': '🏠',
					'其他': '📝',
					// 收入分类
					'工资': '💰',
					'奖金': '🎁',
					'投资': '📈',
					'兼职': '💼',
					'其他收入': '📊'
				}
				return iconMap[this.categoryData.name] || '📝'
			},
			formatDate(dateString) {
				const date = new Date(dateString)
				return `${date.getMonth() + 1}月${date.getDate()}日`
			},
			formatTime(dateString) {
				const date = new Date(dateString)
				return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.category-overview {
		margin: 30rpx;
		background: $cute-bg-secondary;
		border-radius: 25rpx;
		padding: 40rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.category-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.category-icon {
		width: 80rpx;
		height: 80rpx;
		background: $cute-gradient-accent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 25rpx;
		box-shadow: 0 8rpx 20rpx rgba(255, 182, 193, 0.3);
	}

	.icon-text {
		font-size: 40rpx;
	}

	.category-info {
		flex: 1;
	}

	.category-name {
		font-size: 36rpx;
		font-weight: bold;
		color: $cute-text-primary;
		display: block;
		margin-bottom: 8rpx;
	}

	.category-type {
		font-size: 26rpx;
		color: $cute-text-secondary;
	}

	.category-stats {
		display: flex;
		gap: 40rpx;
	}

	.stat-item {
		flex: 1;
		text-align: center;
		padding: 25rpx;
		background: $cute-bg-tertiary;
		border-radius: 15rpx;
		border: 1rpx solid $cute-divider;
	}

	.stat-label {
		font-size: 24rpx;
		color: $cute-text-secondary;
		display: block;
		margin-bottom: 10rpx;
	}

	.stat-value {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
		
		&.expense {
			color: $cute-error;
		}
		
		&.income {
			color: $cute-success;
		}
	}

	.records-section {
		margin: 30rpx;
		background: $cute-bg-secondary;
		border-radius: 25rpx;
		padding: 40rpx 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
	}

	.record-count {
		font-size: 26rpx;
		color: $cute-text-secondary;
		background: $cute-bg-tertiary;
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
	}

	.loading-state {
		text-align: center;
		padding: 60rpx 0;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto 20rpx;
		border: 4rpx solid $cute-border;
		border-top-color: $cute-primary;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	.loading-text {
		font-size: 28rpx;
		color: $cute-text-secondary;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.record-list {
		padding: 0 10rpx;
	}

	.record-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid $cute-divider;
		
		&:last-child {
			border-bottom: none;
		}
	}

	.record-date {
		width: 120rpx;
		flex-shrink: 0;
	}

	.date-text {
		font-size: 24rpx;
		color: $cute-text-tertiary;
	}

	.record-info {
		flex: 1;
		margin: 0 20rpx;
	}

	.record-note {
		font-size: 28rpx;
		color: $cute-text-primary;
		display: block;
		margin-bottom: 6rpx;
	}

	.record-time {
		font-size: 22rpx;
		color: $cute-text-tertiary;
	}

	.record-amount {
		text-align: right;
	}

	.amount-text {
		font-size: 30rpx;
		font-weight: bold;
		
		&.expense {
			color: $cute-error;
		}
		
		&.income {
			color: $cute-success;
		}
	}

	.empty-records {
		text-align: center;
		padding: 80rpx 0;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: $cute-text-secondary;
		margin-bottom: 15rpx;
		display: block;
	}

	.empty-desc {
		font-size: 26rpx;
		color: $cute-text-tertiary;
	}
</style>
